<!--
1. 除了vue-resource 之外，还可以使用 axios的第三方吧包实现数据的请求
2. vue-resource 依赖 vue
3. 在 vue 上挂在了属性 this.$http
4. 当发起get请求后，通过.then(successCallback,failCallback)来设置成功的回调函数
    .then使用promise来封装的，通过.then能够拿到放回的数据，成功的回调必须要传
5. 手动发起的Post请求，默认没有表单格式，所以有的服务器是请求不了的。
    通过post方法的第三个参数，设置提交的内容类型为普通的表单格式 emulateJSON:true
6. jsonp请求
    1. 由于安全性的限制，不允许ajax访问 协议不同、域名不同、端口不同的 数据接口
    2. 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式称为 jsonp
    3. jsonp 只支持get请求
7. application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getInfo">get</button>
        <button @click="postInfo">post</button>
        <button @click="jsonpInfo">jsonp</button>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{
                getInfo(){
                    this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then( function (result) {
                        console.log(result.body);
                    })
                },
                postInfo(){
                    this.$http.post('http://www.liulongbin.top:3005/api/addproduct',{name:"夕何"},{emulateJSON:true})
                        .then(result=>{
                            console.log(result);
                        })
                },
                jsonpInfo(){
                    this.$http.jsonp('http://www.liulongbin.top:3005/api/jsonp').then(result=>{
                        console.log(result.body);
                    })
                }
            },
        });
    </script>
</body>
</html>